<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .wrapper { margin: 15px auto; border: 1px solid gray; }
        </style>
    </head>
    <body>

        <h3>指令: v-model</h3>

        <div id="root">
            <div class="wrapper first">
                <h4>基本应用</h4>
                <p>
                    <input type="text" v-model="name"> 
                    <b>{{ name }}</b>
                </p>
                <p>
                    单选按钮:
                    <input type="radio" v-model="gender" value="male"> 靓仔
                    <input type="radio" v-model="gender" value="female"> 靓妹
                    <b>{{ gender }}</b>
                </p>
                <p>
                    复选按钮:
                    <input type="checkbox" v-model="hobby" value="eat"> 吃
                    <input type="checkbox" v-model="hobby" value="sleep"> 睡
                    <input type="checkbox" v-model="hobby" value="play"> 玩
                    <b>{{ hobby }}</b>
                </p>
                <p>
                    下拉框(单选):
                    <select v-model="hometown">
                        <option value="sichuan">四川省</option>
                        <option value="gansu">甘肃省</option>
                        <option value="shaanxi">陕西省</option>
                    </select>
                    <b>{{ hometown }}</b>
                </p>
                <p>
                    多选框(多选):
                    <select v-model="courses" multiple>
                        <option value="Java">Java</option>
                        <option value="JS">JavaScript</option>
                        <option value="JDBC">JDBC</option>
                    </select>
                    <b>{{ courses }}</b>
                </p>
                <p>
                    文本域:
                    <textarea v-model="introduction"></textarea>
                </p>
            </div>

            <div class="wrapper second">
                <h4>绑定值</h4>
                <p>
                    <input type="radio" v-model="picked" :value="value" id="have">
                    <label for="have">有车有房</label>
                    |
                    <b>{{ picked }}</b>
                    |
                    <b>{{ value }}</b>
                </p>
                <p>
                    <input type="checkbox" 
                           v-model="unLogin" 
                           :true-value="trueValue" 
                           :false-value="falseValue" id="unLogin">
                    <label for="unLogin">30天内免登录</label>
                    |
                    <b>{{ unLogin }}</b>
                    |
                    <b>{{ trueValue }}</b>
                    |
                    <b>{{ falseValue }}</b>
                </p>
                <p>
                    选择列表:
                    <select v-model="city">
                        <option :value="{ name: '成都' }">成都</option>
                    </select>
                    &nbsp;&nbsp;
                    <b>{{city}}</b>
                    &nbsp;|&nbsp;
                    <b>{{city.name}}</b>
                </p>
            </div>

            <div class="wrapper third">
                <p>
                    <input type="text" v-model.lazy="username" >
                    &nbsp;&nbsp;
                    {{ username }}
                </p>
                <p>
                    <input type="text" v-model.number="price" >
                    &nbsp;&nbsp;
                    {{ price }}
                    &nbsp;|&nbsp;
                    {{ typeof price }}
                </p>
            </div>

        </div><!-- #root 结束 -->

        <script src="vue.global.js"></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        name: 'RespJone', 
                        gender: 'female',
                        hobby: [ 'sleep' ] ,
                        hometown: 'gansu' ,
                        courses: [ 'Java' , 'JS'],
                        introduction: '我，人称 Resp Jone，不折不扣的拆二代，家里有车有有房...',
                        picked: '' ,
                        value: Math.random() > 0.5 ? 'have_car_have_house' : 'none' ,
                        unLogin: '',
                        trueValue: '30天内免登录',
                        falseValue: '每天都要登录',
                        city: '' ,
                        username: '',
                        price: 14
                    }
                }
            });
            app.mount('#root');
        </script>
        
    </body>
</html>